<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - 鸿升冠腾科技</title>
    <link rel="stylesheet" href="/assets/css/main.css?v=4">
    <script src="/assets/js/common-components.js" defer></script>
    <script src="/assets/js/cyber-effects.js"></script>
    <style>
        .contact-container {
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
        }
        .contact-info,
        .contact-form {
            flex: 1;
            min-width: 300px;
        }
        .contact-info {
            background-color: #f9f9f9;
            padding: 30px;
            border-radius: 8px;
        }
        .info-item {
            margin-bottom: 20px;
            display: flex;
            align-items: flex-start;
        }
        .info-icon {
            margin-right: 15px;
            color: var(--primary-color);
            font-size: 20px;
        }
        .info-content h3 {
            margin-bottom: 5px;
            color: var(--text-color);
        }
        .map-container {
            margin-top: 30px;
            height: 300px;
            background-color: #e9ecef;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .map-placeholder {
            text-align: center;
            color: var(--dark-gray);
        }
        .map-placeholder p {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <header>
        <!-- Header content will be populated by JavaScript -->
    </header>
    <main>
        <section class="contact-us">
            <div class="container">
                <h1 data-i18n="contact_us.heading">联系我们</h1>
                <div class="page-container">
                    <div class="contact-info">
                        <h2 data-i18n="contact_us.contact_info">联系方式</h2>
                        <div class="info-item">
                            <div class="info-icon">📞</div>
                            <div class="info-content">
                                <h3 data-i18n="contact_us.customer_hotline">客服热线</h3>
                                <p data-i18n="contact_us.phone_number">+86 21 20528088</p>
                                <p data-i18n="contact_us.working_hours">工作日 9:00-18:00</p>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-icon">✉️</div>
                            <div class="info-content">
                                <h3 data-i18n="contact_us.email">电子邮箱</h3>
                                <p data-i18n="contact_us.email_address">info@hskavtbpay.com</p>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-icon">🏢</div>
                            <div class="info-content">
                                <h3 data-i18n="contact_us.address">公司地址</h3>
                                <p data-i18n="contact_us.company_address">深圳市前海深港合作区前湾一路1号A栋201室</p>
                                <p data-i18n="contact_us.business_secretary">入驻深圳市前海商务秘书有限公司</p>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-icon">🕒</div>
                            <div class="info-content">
                                <h3 data-i18n="contact_us.work_time">工作时间</h3>
                                <p data-i18n="contact_us.weekdays">周一至周五: 9:00-18:00</p>
                                <p data-i18n="contact_us.weekends">周六至周日: 休息</p>
                            </div>
                        </div>

                        <div class="map-container">
                            <div class="map-placeholder">
                                <p>公司位置地图</p>
                                <p>（实际项目中此处将嵌入地图）</p>
                            </div>
                        </div>
                    </div>

                    <div class="contact-form">
                        <h2>发送消息</h2>
                        <form id="contact-form">
                            <div class="form-group">
                                <label for="name">姓名 *</label>
                                <input type="text" id="name" name="name" required>
                            </div>
                            <div class="form-group">
                                <label for="email">邮箱 *</label>
                                <input type="email" id="email" name="email" required>
                            </div>
                            <div class="form-group">
                                <label for="subject">主题 *</label>
                                <input type="text" id="subject" name="subject" required>
                            </div>
                            <div class="form-group">
                                <label for="message">留言内容 *</label>
                                <textarea id="message" name="message" rows="5" required></textarea>
                            </div>
                            <button type="submit" class="button">发送留言</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <section class="banner">
        <div class="container">
            <h1 data-i18n="contact_us.banner.title">联系我们</h1>
        </div>
    </section>

    <section class="core-services">
        <div class="container">
            <h2 data-i18n="contact_us.services.title">客户支持服务</h2>
            <!-- 服务内容 -->
        </div>
    </section>
    <footer>
        <!-- Footer content will be populated by JavaScript -->
    </footer>
    <script src="/assets/js/language-switcher.js"></script>
    <!-- 删除cyber-effects脚本 -->
    <script src="/assets/js/common-components.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('contact-form');
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                // In a real implementation, this would send data to a server
                alert('留言发送成功！我们将尽快与您联系。');
                form.reset();
            });
        });
    </script>
</body>
</html>